<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="org.f0rb.demo.common.Message" %>
<%--@elvariable id="model" type="org.f0rb.demo.dto.UserDTO"--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%@ page session="false" %>
<!DOCTYPE HTML>
<html lang=<%=Message.locale()%>>
<head>
    <meta charset=utf-8>
    <title><%=Message.REGISTER_TITLE%></title>
    <link href="<c:url value="/resources/css/global.css"/>" rel="stylesheet">
    <jsp:include page="/WEB-INF/jsp/head/jquery.jsp"/>
    <jsp:include page="/WEB-INF/jsp/head/fixie.jsp"/>
    <style type="text/css">
        #register {
            margin: 80px auto 0;
        }

        #register-form {
            margin:0 auto;
            width:680px;
            padding:30px;
            background-color:#FEFEFE;
            border:1px solid #BfD6E1;
            border-radius:10px;
            color:#444;
            font:14px 'Microsoft YaHei', '微软雅黑';
        }
    </style>
</head>
<body>
<div id="register" class="main_content">
    <form id="register-form" class="large" method="post">
        <h4><%=Message.REGISTER_HEADING%></h4>

        <p>
            <label></label><span>${model.messages.register[0]}</span>
        </p>

        <p>
            <label for="username-in"><%=Message.USER_USERNAME_LABEL%></label><input id="username-in" name="username" required type="email" autocomplete="off" placeholder="<%=Message.USER_USERNAME_DESC%>" value=${model.username}><span>${model.messages.username[0]}</span>
        </p>

        <p>
            <label for="newpass-in"><%=Message.USER_PASSWORD_LABEL%></label><input id="newpass-in" name="newpass" required type="password" autocomplete="off" placeholder="<%=Message.USER_PASSWORD_DESC%>"><span>${model.messages.newpass[0]}</span>
        </p>

        <p>
            <label for="confpass-in"><%=Message.USER_CONFPASS_LABEL%></label><input id="confpass-in" name="confpass" required type="password" placeholder="<%=Message.USER_CONFPASS_DESC%>"><span>${model.messages.confpass[0]}</span>
        </p>

        <p>
            <label for="nickname-in"><%=Message.USER_NICKNAME_LABEL%></label><input id="nickname-in" name="nickname" required="required" type="text" placeholder="<%=Message.USER_NICKNAME_DESC%>" value=${model.nickname}><span>${model.messages.nickname[0]}</span>
        </p>

        <div>
            <button type="submit"><%=Message.REGISTER_SUBMIT%></button>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function() {
        addCheckFiled("username");
        addCheckFiled("newpass");
        addCheckFiled("confpass", "newpass");
        addCheckFiled("nickname");
        function addCheckFiled(fieldname, extrafield) {
            $("#" + fieldname + "-in").blur(function() {
                var elem = this;
                if (!elem.value || elem.value.trim() == "") return;
                var param = {};
                param[fieldname] = elem.value.trim();
                if (extrafield){
                    param[extrafield] = $("#" + extrafield +"-in")[0].value;
                }
                $.get("check-" + fieldname, param, function(data) {
                    elem.nextSibling.innerHTML = "";
                    if (data.messages) {
                        elem.nextSibling.innerHTML = data.messages[fieldname];
                    }
                })
            })
        }
    })
</script>
<jsp:include page="/WEB-INF/jsp/common/footer.jsp"/>
</body>
</html>